<template>
	<view class="content">
		<view class="content-main">
			<u--form labelPosition="left" ref="uForm" :model="forms" :rules="rules">
				<u-form-item label="参赛人姓名" prop="name" borderBottom required>
					<u--input
						v-model="forms.name"
						placeholder="必填，请与证件名一致"
						border="none"
						inputAlign="right"
					></u--input>
				</u-form-item>
				<u-form-item
					label="选手类型"
					prop="type_name"
					borderBottom
					@click="showtype = true"
					required
				>
					<u--input
						v-model="forms.type_name"
						disabled
						placeholder="请选择"
						border="none"
						inputAlign="right"
						disabledColor="#fff"
					></u--input>
					<u-icon slot="right" name="arrow-right" color="#aaa"></u-icon>
				</u-form-item>
				<u-form-item label="证件类型" prop="cid_name" borderBottom @click="show = true" required>
					<u--input
						v-model="forms.cid_name"
						disabled
						placeholder="请选择"
						border="none"
						inputAlign="right"
						disabledColor="#fff"
					></u--input>
					<u-icon slot="right" name="arrow-right" color="#aaa"></u-icon>
				</u-form-item>
				<u-form-item label="证件号码" prop="cno" borderBottom required>
					<u--input
						v-model="forms.cno"
						type="idcard"
						border="none"
						maxlength="18"
						placeholder="请输入正确的证件号码"
						inputAlign="right"
					></u--input>
				</u-form-item>
				<u-form-item label="联系电话" prop="mobile" borderBottom required>
					<u--input
						v-model="forms.mobile"
						border="none"
						type="number"
						maxlength="11"
						placeholder="请输入"
						inputAlign="right"
					></u--input>
				</u-form-item>
				<!-- 	<u-form-item label="籍贯" prop="cin_jshead_phone" borderBottom required>
					<u--input
						v-model="forms.cin_jshead_phone"
						border="none"
						placeholder="必填，请与证件信息一致"
						inputAlign="right"
					></u--input>
				</u-form-item> -->
				<u-form-item label="性别" prop="sex_name" borderBottom @click="showSex = true" required>
					<u--input
						v-model="forms.sex_name"
						disabled
						border="none"
						disabledColor="#fff"
						placeholder="必填，请与证件信息一致"
						inputAlign="right"
					></u--input>
					<u-icon slot="right" name="arrow-right" color="#aaa"></u-icon>
				</u-form-item>
			</u--form>
		</view>
		<view class="content-main mode">
			<u-cell-group :border="false">
				<u-cell title="设置为本人" label="设置当前账号的使用者为本人" center :border="false">
					<u-switch slot="value" v-model="forms.checked"></u-switch>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="content-main mode" style="padding-top: 36rpx">
			<u-checkbox-group v-model="forms.checkbox" iconPlacement="right" placement="row">
				<u-checkbox
					activeColor="#0071c5"
					label="阅读并同意以下内容"
					shape="circle"
					size="36rpx"
				></u-checkbox>
			</u-checkbox-group>
			<u-cell
				label="您已知晓您在野人体育录入的参赛人身份证信息，将用户报名马拉松等所有需要实名制的赛事产品，并在您保存时进行验证，请确保此信息真实有效。野人体育将通过加密等方式保护此信息。"
				:border="false"
			></u-cell>
		</view>
		<view class="footer">
			<button class="footer-btn" @click="onSubmit">保存</button>
		</view>
		<!-- <CustomPicker
			ref="typePicker"
			title="选择证件类型"
			:options="typeOptions"
			@confirm="confirmOrder"
		></CustomPicker> -->
		<u-action-sheet
			:show="show"
			:actions="actions"
			title="请选择证件类型"
			@close="show = false"
			@select="cidSelect"
			round="14"
		></u-action-sheet>
		<u-action-sheet
			:show="showtype"
			:actions="actionsType"
			title="请选择选手类型"
			@close="showtype = false"
			@select="typeSelect"
			round="14"
		/>
		<u-action-sheet
			:show="showSex"
			:actions="actionsSex"
			title="请选择选手类型"
			@close="showSex = false"
			@select="sexSelect"
			round="14"
		></u-action-sheet>
	</view>
</template>

<script>
const app = getApp()
import CustomPicker from '@/components/customPicker.vue'
export default {
	components: { CustomPicker },
	data() {
		return {
			id: '',
			detailInfo: {},
			forms: {
				name: '',
				type: '',
				type_name: '',
				cid: '',
				cid_name: '',
				cno: '',
				mobile: '',
				sex: '',
				sex_name: '',
				checked: false
			},
			rules: {
				name: {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				type_name: {
					type: 'string',
					required: true,
					message: '请选择',
					trigger: ['blur', 'change']
				},
				cid_name: {
					type: 'string',
					required: true,
					message: '请选择',
					trigger: ['blur', 'change']
				},
				cno: {
					type: 'string',
					required: true,
					message: '请填证件号码',
					trigger: ['blur', 'change']
				},
				mobile: [
					{
						type: 'string',
						required: true,
						message: '请填证件号码',
						trigger: ['blur', 'change']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value)
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur']
					}
				],
				sex_name: {
					type: 'string',
					required: true,
					message: '请选择',
					trigger: ['blur', 'change']
				}
			},
			actions: [
				{ name: '身份证', id: 1 },
				{ name: '护照', id: 2 }
			],
			show: false,
			actionsType: [
				{ name: '成人', id: 1 },
				{ name: '儿童', id: 2 }
			],
			typeOptions: [],
			showtype: false,
			actionsSex: [
				{ name: '男', id: 1 },
				{ name: '女', id: 2 }
			],
			showSex: false
		}
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules)
	},
	onLoad(options) {
		const eventChannel = this.getOpenerEventChannel()
		if (!eventChannel) return
		eventChannel.on('playerEvent', (data) => {
			console.log(data)
			this.forms = {
				...this.forms,
				type_name: data.type ? (data.type == 1 ? '成人' : '儿童') : '',
				cid_name: data.cid ? (data.cid == 1 ? '身份证' : '护照') : '',
				sex_name: data.sex ? (data.sex == 1 ? '男' : '女') : '',
				...data
			}
		})
	},
	methods: {
		getDetailInfo() {
			/* prettier-ignore */
			this.$https( true, 'post', {
				url: '/Home/ServerOrder/getInfo',
				data: {
					token: uni.getStorageSync('token'),
					id: this.id
				}
			},(res) => {
				this.detailInfo = res.data
			})
			/* prettier-ignore */
		},
		sexSelect(e) {
			console.log(e)
			this.forms.sex_name = e.name
			this.forms.sex = e.id
			this.$refs.uForm.validateField('sex_name')
		},
		cidSelect(e) {
			this.forms.cid_name = e.name
			this.forms.cid = e.id
			this.$refs.uForm.validateField('cid_name')
		},
		// 选手类型选择
		typeSelect(e) {
			this.forms.type = e.id
			this.forms.type_name = e.name
			this.$refs.uForm.validateField('type_name')
		},
		// 提交
		onSubmit() {
			this.$refs.uForm
				.validate()
				.then(async (res) => {
					if (!this.forms.checkbox) {
						uni.$u.toast('阅读并同意内容！')
						return
					}
					const eventChannel = this.getOpenerEventChannel()
					eventChannel.emit('acceptData', this.forms)
					uni.navigateBack()
				})
				.catch((error) => {
					uni.$u.toast('请完善信息后提交！')
				})
		}
	}
}
</script>
<style lang="scss" scoped>
.content {
	min-height: 100vh;
	overflow-x: hidden;
	padding: 0 32rpx 130rpx;
	width: calc(100% - 64rpx);
	&-main {
		margin: 20rpx 0;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx 26rpx;
	}
}
button::after {
	border: 0 none;
}
.footer {
	width: calc(100% - 48rpx);
	padding: 0 24rpx;
	height: 120rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9;
	border-top: 1px solid #e5e5e5;
	&-btn {
		width: 684rpx;
		height: 80rpx;
		background-color: #0071c5;
		border: 1px solid #0071c5;
		border-radius: 16rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 0;
	}
}
::v-deep {
	.u-form-item__body__left {
		width: 290rpx !important;
		font-weight: normal;
		color: #333 !important;
		font-size: 28rpx !important;
	}
	.u-form-item__body {
		align-items: flex-start;
	}
	.u-form-item__body__right__message {
		text-align: right;
	}
	.mode .u-cell__body {
		padding: 10rpx 0;
		width: 100%;
	}
	.mode .u-checkbox {
		width: 100%;
		line-height: 40rpx;
	}
}
</style>
